<script>
export default {
  name: "show-info",
  /*
  子组件通过props接收父组件传递过来的props(数组语法 不能对类型进行验证指定必填项和默认值)
  props: ["name", "age", "height"]
  */
  props: {
    name: {
      type: String,//props的数据类型
      default: "",//props的默认值
      required: true,//props为必填项
      validator: (value) => {//自定义校验规则
        return typeof value === "string";
      }
    },
    age: {
      type: Number,
      default: 1,
      required: true
    },
    height: {
      type: Number,
      default: 1,
      required: true
    },
    person: {
      type: Object,
      default: () => {
      } // 对象类型的默认值default必须是一个函数然后返回一个对象
    },
    names: {
      type: Array,
      default: () => []// 数组类型的默认值default必须是一个函数然后返回一个数组
    }
  },
  inheritAttrs: false
}
</script>

<template>
  <div class="layui-panel sho-info">
    <div style="padding: 32px;">
      <!-- 使用$attrs来访问所有的非props的attribute-->
      <h2 :class="$attrs.class">姓名：{{ name }}</h2>
      <h2 :class="$attrs.class">年龄：{{ age }}</h2>
      <h2 :class="$attrs.class">身高：{{ height }}</h2>
    </div>
  </div>
</template>

<style scoped lang="less"></style>